<template>
    <a-drawer :title="title" :width="500" @close="handleCancel" :visible="visible" :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">


            <a-form-model-item label="素材图片" prop="readPath" ref="readPath">
                <a-row>

                    <a-col :span="12">
                        <a-upload
                                list-type="picture-card"
                                class="avatar-uploader"
                                :show-upload-list="false"
                                :before-upload="beforeUpload"
                                @change="handleChange"
                                :customRequest="customRequest"
                        >
                            <img v-if="form.readPath" :src="form.readPath" class="picture" alt="请上传素材图片"/>
                            <div v-else>
                                <a-icon :type="loading ? 'loading' : 'plus'"/>
                                <div class="ant-upload-text">请上传一张素材封面图</div>
                            </div>
                        </a-upload>
                    </a-col>
                    <a-col :span="12" v-if="form.width>0">


                            图片尺寸：{{form.width+'x'+form.height}}
                                <br>

                                 <a :href="form.readPath" target="_blank"> 预览素材 </a> <a-icon type="question-circle" />


                            <br>

                            <a-tooltip :title="form.savePath">
                              存储地址  <a-icon type="question-circle" />
                            </a-tooltip>


                    </a-col>
                </a-row>


            </a-form-model-item>


            <a-form-model-item label="素材标题" prop="title" ref="title">
                <a-input placeholder="请设置素材名称" v-model="form.title"/>
            </a-form-model-item>


            <a-form-model-item label="跳转页面" prop="appPath" ref="appPath">
                <a-input placeholder="扫描二维码后跳转的小程序页面" v-model="form.appPath"/>
            </a-form-model-item>

            <a-form-model-item label="二维码尺寸" prop="qrcodeSize" ref="qrcodeSize"
                               help="填充在素材图片的二维码尺寸大小 单位像素 50px ~ 1500px 之内">
                <a-input-number :min="50" :max="1500" placeholder="请设置素材中我二维码的尺寸大小" v-model="form.qrcodeSize"
                                style="width: 90%;"/>
            </a-form-model-item>


            <a-form-model-item label="二维码透明度" prop="transparency" ref="transparency"
                               help="填充在素材图片的二维码尺寸大小 单位像素 0.1 ~ 1 之内">

                <a-slider v-model="form.transparency" :min="1" :max="100"   :marks="marks" />


            </a-form-model-item>


            <a-form-model-item label="二维码顶部距离" prop="topPx" ref="topPx" help="二维码图片的顶边 与 素材图片的顶边的距离（单位：像素）">

                <a-input-number :min="0"
                                :max="form.height"
                                placeholder="请设置素材中我二维码的尺寸大小" v-model="form.topPx"
                                style="width: 90%;"/>

            </a-form-model-item>


            <a-form-model-item label="二维码左侧距离" prop="leftPx" ref="leftPx" help="二维码图片的左边 与 素材图片的左边的距离（单位：像素）">

                <a-input-number :min="0"
                                :max="form.width"
                                placeholder="请设置素材中我二维码的尺寸大小" v-model="form.leftPx" style="width: 90%;"/>

            </a-form-model-item>


        </a-form-model>

        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </footer>
    </a-drawer>
</template>
<script>
    import {spreadMaterialAdd, spreadMaterialUpdate} from '../public/http.js';
    import {materialUpload} from '../public/internal'

    export default {
        props: ['editRecord'],


        data() {
            return {
                isUpdate: false, //是否是更新模式
                loading: false, //按钮Loading
                title: '新增素材档案',
                visible: true, //modal 显示状态
                AmapSectorShow: false,


                marks: {0: '0', 50: '50%', 100: '100%'},

                form: {
                    title: null,
                    transparency:100,
                    appPath:"pages/index/index",
                    savePath: null,
                    readPath: null,
                    height: 0,
                    width: 0,
                    qrcodeSize: 430,
                    topPx: 0,
                    leftPx: 0,


                },
                rules: {
                    readPath: {
                        required: true,
                        message: '请上传二维码素材图片',
                        trigger: 'blur'
                    },

                    appPath:{
                        required: true,
                        message: '小程序跳转页面不能为空',
                        trigger: 'blur'

                    },
                    qrcodeSize: [
                        {
                            required: true,
                            message: '二维码尺寸不能为空',
                            trigger: 'blur'
                        }

                    ],


                },

            };
        },
        methods: {


            //表单提交事件
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    //验证成功后进行数据提交
                    if (valid) {
                        this.loading = true;
                        if (this.isUpdate) {
                            spreadMaterialUpdate(this.form.id, this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });

                        } else {
                            spreadMaterialAdd(this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });
                        }
                    }
                });
            },


            //关闭弹窗
            handleCancel(render = false) {
                this.visible = false;
                this.$emit('closeFun', {render: render});
            },
            //表单初始化
            fromVal() {
                let obj = {...this.editRecord};
                if (obj.id) {
                    this.form = obj;
                    this.isUpdate = true;
                    this.title = '编辑档案信息';
                }
            },
            //数据初始化
            async init() {

                this.fromVal();

            },


            //素材封面上传方法
            customRequest(e) {
                const formData = new FormData();
                formData.append('file', e.file)
                materialUpload(formData).then((res) => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.form.savePath = res.data.result.savePath;
                        this.form.readPath = res.data.result.readPath;
                        this.form.height = res.data.result.height;
                        this.form.width = res.data.result.width;
                    }
                })
            },
            //监听上传状态  uploading 开始
            handleChange(info) {

                if (info.file.status === 'uploading') {
                    this.loading = true;
                }
            },
            //上传之前数据检查
            beforeUpload(file) {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    this.$message.error('只允许上传JPG、PNG格式的图片文件');
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('单个文件图片不能超过 2MB!');
                }
                return isJpgOrPng && isLt2M;
            },

        },

        created() {
            this.init();
        }
    };
</script>

<style scoped>

    .picture {
        width: 200px;
        height: 100px;
        overflow: hidden;
    }

</style>
